﻿<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spa Land - Body & Massage Therapy HTML Template | Blog Detail</title>

<!-- Stylesheets -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">

<!--Color Switcher Mockup-->
<link href="/css/color-switcher-design.css" rel="stylesheet">

<!--Color Themes-->
<link id="theme-color-file" href="/css/color-themes/default-theme.css" rel="stylesheet">

<!--Favicon-->
<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
<link rel="icon" href="/images/favicon.png" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="/https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="/js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">
 	
    <!-- Preloader -->
    <div class="preloader"></div>
 	
    <!-- Main Header-->
    <header class="main-header header-style-three">
    	
        <!--Header Top-->
    	<div th:insert="~{header :: #header-top}"></div>
        <!-- End Header Top -->

        <!-- Header Lower -->
        <div class="header-lower">
            <div class="auto-container">
              <div th:insert="~{header :: #main-box}"></div>
            </div>
        </div>
        <!-- End Header Lower -->
        
        <!--Sticky Header-->
        <div th:insert="~{header :: #header-sticky}"></div>
        <!--End Sticky Header-->
    </header>
    <!--End Main Header -->

 	<!--Page Title-->
    <section class="page-title" style="background-image:url(/images/background/11.jpg);">
        <div class="auto-container">
        	<div class="inner-container clearfix">
	            <h1>文章详情</h1>
	            <ul class="bread-crumb clearfix">
	                <li><a href="index.html">首页</a></li>
	                <li>文章详情</li>
	            </ul>
        	</div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- Sidebar Page Container -->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="row clearfix">
                <!--Content Side-->
                <div class="content-side col-md-8 col-sm-12 col-xs-12">
                    <div class="blog-detail">
                        <!-- News Block -->
                        <div class="news-block">
                            <div class="inner-box">
                                <div class="image-box">
                                    <img style="height: 400px;width: 770px;" th:src="'http://47.94.10.67/images/' + ${blog.imgUrl}" alt="">
                                    <span class="tag" th:text="${blog.title}" }></span>
                                </div>
                                <div class="lower-content">
                                    <ul class="info">
                                        <li>作者： <a  th:text="${blog.author}">Akshay</a></li>
                                        <li><a th:text="'发布时间：' + ${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}"></a></li>
                                    </ul>
                                    <h3><a th:text="${blog.title}"></a></h3>
                                    <p  th:text="${blog.content}"></p>
                                </div>
                            </div>
                        </div>

                        <!-- Other Options -->
                        <div class="post-share-options clearfix">

                            <div class="pull-right">
                                <p>社交媒体 : </p>
                                <ul class="social-icon">
                                    <li><a href="#"><span class="fa fa-pinterest"></span></a></li>
                                    <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
                                    <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                                    <li><a href="#"><span class="fa fa-dribbble"></span></a></li>
                                </ul>
                            </div>
                        </div>


                        <!--Comments Area-->
                        <div class="comments-area">
                            <div class="group-title"><h2>阅读评论</h2></div>



                            <div class="comment-box" th:each="comm:${comment.list}">
                                <!-- Comment -->
                                <div class="comment">
                                    <div class="author-thumb"><img src="/images/favicon.png" alt=""></div>
                                    <div class="comment-info">
                                        <h4 class="name" th:text="${comm.username}"></h4>
                                        <span class="date" th:text="'发布时间：' + ${#dates.format(comm.updateTime,'yyyy-MM-dd HH:mm')}"></span>
                                    </div>  
                                    <div class="text" th:text="${comm.content}"></div>
                                    <div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- Comment Form -->
                        <div class="comment-form">
                            <div class="clearfix">
                                <div class="group-title"><h2>添加您的评论:</h2></div>
                            </div>

                            <!--Comment Form-->
                            <form method="post" action="/comment/addComment">
                                <div class="row clearfix">
                                    <input type="hidden"  name="articleId" th:value="${blog.id}">
                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <input type="text" name="username" placeholder="Name" required>
                                    </div>
                                    
                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <input type="email" name="email" placeholder="Email" required>
                                    </div>
                                    
                                    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                                        <textarea name="content" placeholder="您的评论"></textarea>
                                    </div>
                                    
                                    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                                        <button class="theme-btn btn-style-four" type="submit" name="submit-form">发表评论</button>
                                    </div>
                                </div>
                            </form>
                        </div><!--End Comment Form -->

                    </div>
                </div><!-- Blog List -->

                <!--Sidebar Side-->
                <div class="sidebar-side col-md-4 col-sm-12 col-xs-12">
                    <aside class="sidebar default-sidebar">
                        <!--search box-->
                        <div class="sidebar-widget search-box">
                            <form method="post" action="blog.html">
                                <div class="form-group">
                                    <input type="search" name="search-field" value="" placeholder="Search......" required="">
                                    <button type="submit"><span class="icon flaticon-search"></span></button>
                                </div>
                            </form>
                        </div>


                        <!-- Latest News -->
                        <div class="sidebar-widget popular-posts">
                            <div class="sidebar-widget popular-posts">
                                <div class="sidebar-title"><h2>为您推荐的文章</h2></div>
                                <div class="widget-content">
                                    <article class="post" th:each="blog:${blogs.list}">
                                        <a th:href="'/page/blogDetail?id='+${blog.id}"> <div class="post-thumb"><img  th:src="'http://47.94.10.67/images/' + ${blog.imgUrl}" alt="查看详情"></div></a>
                                        <h3><a th:href="'/page/blogDetail?id='+${blog.id}" th:text="${blog.title}"  ></a></h3>
                                        <span class="date" th:text="'发布时间：' + ${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}" ></span>
                                    </article>


                                </div>
                            </div>
                        </div>





                    </aside>
                </div>
            </div>
        </div>
    </div>
    <!-- End Sidebar Container -->


    <!-- Main Footer -->
    <div th:insert="~{footer :: #footer}"></div>
    <!-- End Main Footer -->

</div>    
<!--End pagewrapper-->

<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-gear"></i>
    </div>
    <div class="color-palate-head">
        <h6>选择一个你喜欢的主题</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="/css/color-themes/default-theme.css"></span>
            <span class="palate teal-color" data-theme-file="/css/color-themes/teal-theme.css"></span>
            <span class="palate navy-color" data-theme-file="/css/color-themes/navy-theme.css"></span>
            <span class="palate yellow-color" data-theme-file="/css/color-themes/yellow-theme.css"></span>
            <span class="palate blue-color" data-theme-file="/css/color-themes/blue-theme.css"></span>
            <span class="palate purple-color" data-theme-file="/css/color-themes/purple-theme.css"></span>
            <span class="palate olive-color" data-theme-file="/css/color-themes/olive-theme.css"></span>
            <span class="palate red-color" data-theme-file="/css/color-themes/red-theme.css"></span>
        </div>
    </div>

    <div class="palate-foo">
        <span>你可以很简单的改变主体颜色</span>
    </div>

</div>
<!-- /.End Of Color Palate -->

<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--End Revolution Slider-->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.fancybox.js"></script>
<script src="/js/owl.js"></script>
<script src="/js/appear.js"></script>
<script src="/js/wow.js"></script>
<script src="/js/mixitup.js"></script>
<script src="/js/script.js"></script>
<!--Color Switcher-->
<script src="/js/color-settings.js"></script>
</body>
</html>
<script type="text/javascript">
    function searchService() {
        var question = $("#q").val().trim();
        window.location.href = '/gallery/searchGallery?question=' + question;
    }
</script>